<template>
    <div>
        <Navbar></Navbar>
        <!-- <Home v-if="which === '首页'"></Home>
        <List v-else-if="which === '列表'"></List>
        <Center v-else></Center> -->

        <!-- 内置的动态组件 -->
        <!-- <KeepAlive include="home">
            <component :is="which"></component>
        </KeepAlive> -->
        <!-- <KeepAlive include="home,list">
            <component :is="which"></component>
        </KeepAlive> -->
        <!-- 正则表达式需要动态绑定 -->
        <!-- <KeepAlive :include="/home|list/">
            <component :is="which"></component>
        </KeepAlive> -->

        <!-- <KeepAlive :include="['home', 'center']">
            <component :is="which"></component>
        </KeepAlive> -->

        <KeepAlive :exclude="['home', 'center']">
            <component :is="which"></component>
        </KeepAlive>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';
import Navbar from './Navbar.vue';
import store from './store';
import Tabbar from './Tabbar.vue';
// import Center from './views/Center.vue';
// import Home from './views/Home.vue';
// import List from './views/List.vue';
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'


export default {
    components: {
        Navbar,
        Tabbar,
        Center: defineAsyncComponent(() => import("./views/Center.vue")),
        Home: defineAsyncComponent(() => import("./views/Home.vue")),
        List: defineAsyncComponent({
            //加载函数
            loader: () => import("./views/List.vue"),

            //加载异步组件时使用的loading组件
            loadingComponent: LoadingComponent,
            //展示loading组件前的延迟时间，默认是200ms
            delay: 0,

            //加载失败后展示的组件
            errorComponent: ErrorComponent,
            //超时时间，超时后会加载失败组件
            timeout: 1000
        })
    },
    data() {
        return {
            // which: "首页",
            which: "Home",

        }
    },

    mounted() {
        const obj = {
            "首页": "Home",
            "列表": "List",
            "我的": "Center"
        };
        //订阅
        store.subscribe((value) => {
            console.log("app-触发了", value);
            this.which = obj[value]
        })
    }
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}
</style>